<template>
  <div class="user-list" :style="{ width: searchShow ? '500px' : '' }">
    <div class="tool" :style="{ width: searchShow ? '500px' : '' }" @keydown.enter="searchUser()">
      <ab-dinput
        v-model:value="inputValue"
        type="text"
        :pswicon="false"
        placeholder="输入名称关键字搜索"
        color="primary"
        maxlength="25"
        :prefix="searchShow ? '' : 'iconfont icon-sousuo'"
        :wordnum="false"
        :autofocus="false"
        :disabled="false"
        :hover="false"
        :clearicon="searchShow"
        @focus="showSearch(true)"
        @blur="showSearch(false)"
      />
      <ab-button type="primary" v-if="searchShow" @click="searchUser()">搜索</ab-button>
      <ab-button type="hollow" circle v-else @click="listShow = !listShow">
        <i v-if="listShow" class="iconfont icon-shangjiantou2"></i>
        <i v-else class="iconfont icon-jiantou-xia"></i>
      </ab-button>
    </div>
    <div ref="USER_LIST" class="list scroll-base" v-if="listShow">
      <div class="item" v-for="item in userList" :key="item._id">
        <div class="inner" @click="hitUser(item._id)">
          <div>
            <img
              v-if="isNull(item.avatar)"
              src="../../assets/imgs/nouser.png"
            />
            <img v-else :src="item.avatar" />
            <b>{{ item.name }}</b>
          </div>
          <div style="margin-top: 5px">
            <i>注册日期：</i>
            <i>{{ item.createTime }}</i>
          </div>
        </div>
        <div class="detail" v-if="item.show">
          <user-card :data="currentUser" @getmarks="getMarksList" @userEdit="userEditAction" style="display: block" />
        </div>
      </div>
      <div class="btn">
        <button class="more" v-if="userQueryFlag == 'more'" @click="getMarkUsers(indexPage)">加载更多</button>
        <div class="loading" v-if="userQueryFlag == 'loading'">
          <p class="animation-spin" style="width: 15px">
            <i class="iconfont icon-loading11 " style="font-size: 1rem;color: #333;"></i>
          </p>
          <i>加载中…</i>
        </div>
        <i v-if="userQueryFlag == 'nothing'">已显示全部数据</i>
      </div>
    </div>
    <div class="current-user" v-if="!listShow && !isNull(currentUser)">
      <user-card :data="currentUser" @getmarks="getMarksList" @userEdit="userEditAction" />
    </div>
  </div>
</template>

<script>
import { nextTick, onMounted, ref } from "@vue/runtime-core";
import http from "@/axios/http";
import util from "@/assets/js/util";
import AbDinput from "../able_mod/AbDinput.vue";
import AbButton from "../able_mod/AbButton.vue";
import UserCard from "./UserCard.vue";
export default {
  components: {
    AbDinput,
    AbButton,
    UserCard,
  },
  setup(props,ctx) {
    onMounted(() => {
      getMarkUsers(1);
    });
    // 查询用户列表
    let USER_LIST = ref(null)
    let userList = ref([]);
    let indexPage = ref(1)
    let userQueryFlag = ref('loading')
    async function getMarkUsers(index) {
      let g = {}
      g.indexPage = index
      g.pageSize = 10
      g.keyWords = inputValue.value.trim()
      let pk = sessionStorage.getItem('power_key')
      if (pk) g.adminOpenId = pk
      g.loading = index == 1
      userQueryFlag.value = 'loading'
      let r = await http.getMarkUsers(g);
      if (r.code == 10000) {
        let _data = r.data;
        for (let i in _data) {
          _data[i].createTime = util.formatGmt(_data[i].createTime);
          _data[i].show = false;
        }
        let _userList = index == 1 ? [] : userList.value
        _userList.push.apply(_userList,_data)
        indexPage.value = index+1
        setTimeout(() => {
          if (_data.length < g.pageSize) 
            userQueryFlag.value = 'nothing'
          else 
            userQueryFlag.value = 'more'
          userList.value = _userList;
          listShow.value = true;
        }, 300);
        nextTick(()=>{
          if (USER_LIST.value) USER_LIST.value.scrollTop = USER_LIST.value.scrollHeight
        })
      }
    }
    // 点击显示当前用户
    let currentUser = ref();
    function hitUser(id) {
      let _u = userList.value;
      currentUser.value = null;
      for (let i in _u) {
        _u[i].show = false;
        if (id == _u[i]._id) {
          currentUser.value = _u[i];
          _u[i].show = true;
        }
      }
      userList.value = _u;
    }
    // 列表显示
    let listShow = ref(true);
    // 搜索框显示
    let inputValue = ref("");
    let searchShow = ref(false);
    function showSearch(f) {
      let _delay = f ? 1 : 300;
      setTimeout(() => {
        searchShow.value = f;
      }, _delay);
    }
    // 搜索
    function searchUser() {
      currentUser.value = null;
      getMarkUsers(1)
    }

    // 点击日期返回用户当日mark记录
    function getMarksList(e) {
      ctx.emit('getmarks', e)
    }

    // 显示用户编辑框
    function userEditAction(e) {
      e.flag = 'SHOW_USER_EDIT'
      ctx.emit('userEdit', e)
    }

    function isNull(v) {
      return util.isNull(v);
    }

    return {
      USER_LIST,
      userList,
      indexPage,
      userQueryFlag,
      getMarkUsers,
      hitUser,
      currentUser,
      listShow,
      inputValue,
      searchShow,
      showSearch,
      searchUser,
      getMarksList,
      userEditAction,
      isNull,
    };
  },
};
</script>

<style lang="scss" scoped>
.user-list {
  .tool {
    @extend %view-flex;
    flex-direction: row;
    width: 260px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 5px 10px;
    box-shadow: 1px 1px 15px #ccc;
    margin-bottom: 2px;
    border-radius: 5px 5px 5px 0;
  }

  .list {
    background-color: rgba(255, 255, 255, 0.9);
    width: 260px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 3px 3px 5px 5px;
    padding: 10px;
    box-shadow: 1px 1px 10px #ccc;

    .item {
      padding: 10px;
      border-bottom: 1px solid #eee;
      position: relative;

      .inner,
      .detail {
        @extend %view-flex;
        div {
          @extend %view-flex;
          flex-direction: row;
          justify-content: space-between;
          width: 100%;

          img {
            width: 45px;
            height: 45px;
            border-radius: 50%;
          }

          b {
            color: #666;
            font-size: 14px;
            font-weight: 300;
          }

          i {
            font-style: normal;
            font-size: 12px;
            color: #999;
          }
        }
      }

      .inner {
        cursor: pointer;
      }
      .detail {
        position: absolute;
        top: -10px;
        left: -8px;
        background-color: $color-primary-light;
        width: calc(100% + 16px);
        height: 136%;
        box-shadow: 1px 1px 10px #aaa;
        padding: 15px;
        border-radius: 10px;
        z-index: 1001;
      }
    }
  }
  .btn{
    text-align: center;
    padding: 10px;
    .more{
      border: 0;
      cursor: pointer;
      padding: 8px 20px;
      color: #666;
    }
    .more:hover{
      background-color: #ddd;
    }
    .loading{
      @extend %view-flex;
      flex-direction: row;
      p{
        margin: 0;
        padding: 0;
        margin-right: 5px;
      }
    }
    i{
      font-size: 14px;
      color: #666;
      font-style: normal;
    }
  }
  .current-user {
    background-color: rgba(255, 255, 255, 0.9);
    width: 260px;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 1px 1px 10px #999;
  }
}
</style>